﻿/*

            This file is part of the mojomo modular front end design framework for mojoPortal CMS; 
            find more at mojomo.co.uk or mojomo.codeplex.com	

Name:       grid-layout.css

Author:     freshangle.co.uk

Version:    1.0

Purpose:    This css file addressses using a grid within the mojomo framework based on the 
            Fluid Baseline Grid at fluidbaselinegrid.com/. Its at the example stage at the moment, 
            using floating and clearing on .ie classes to control float bugs... and media queries 
            cant be commented in place as respond.js still feeds them to ie! 
    
            To work with a grid, either this one or your own, select the 1-col-center-layout.css 
            and your grid CSS within style.config and add the grid class to an HTML Content Module
            through the 'edit content' page.
            
                    

*/	


/* -------------------------------------------------   grid-layout.css -------------------------------------------- */	 

/*
.size1of1{width:100%}
    
.size1of2{width:50%;}
    
.size1of3{width:33.33333%;}
.size2of3{width:66.66666%;}
    
.size1of4{width:25%;}
.size3of4{width:75%;}
    
.size1of5{width:20%;}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}*/
		

		
/* ----------------------------------------------------   no-js/ie ------------------------------------------------ */	
    
    
    /* column grid */	
 	.g1,.g2,.g3 {float: left} 
     
    /*ie6/7 float bug cure...*/
    .ie7 .g1,.ie7 .g2,.ie7 .g3,.ie6 .g1,.ie6 .g2,.ie6 .g3 {clear:right}	 


	/* 3 column grid */
	.g1 {width:33.33333%}                                               
	.g2 {width:66.66666%;}                                               
	.g3 {width:100%}	  



	
    
/* ---------------------------------------------------  media queries --------------------------------------------- */  


/* MOBILE */
@media only screen and (min-width: 0px) {
         

	/* 1 column grid */
    .g1,.g2,.g3 {width:100%} 
    .g1,.g2,.g3 {float: left} .ie7 .g1,.ie7 .g2,.ie7 .g3,.ie6 .g1,.ie6 .g2,.ie6 .g3 {clear:left}
 
}

/* MOBILE LANDSCAPE */
@media only screen and (min-width: 320px) {
      
/*2 column grid*/

}



/* SMALL TABLET */
@media only screen and (min-width: 480px) {
	
	/* 3 column grid */
	.g1 {width:33.33333%}                                                
	.g2 {width:66.66666%;}                                               
	.g3 {width:100%}	  
    
	.g1,.g2,.g3 {float: left} 
    .ie7 .g1,.ie7 .g2,.ie7 .g3,.ie6 .g1,.ie6 .g2,.ie6 .g3 {clear:right}

}


/* TABLET/NETBOOK */
@media only screen and (min-width: 600px) { 
    

}

/* LANDSCAPE TABLET/NETBOOK/LAPTOP */
@media only screen and (min-width: 768px) { 
	
}


/* DESKTOP */
@media only screen and (min-width: 1024px) { 	

}

/* WIDESCREEN */
@media only screen and (min-width: 1280px) { 
	
}


